// 引入公共css
require("../../assets/css/normalize.css");
require("../../assets/css/reset.css");
require("../../assets/css/basic.css");
require("../../assets/css/property.css");
require("../../assets/fonts/word-img/iconfont.css");

// 引入自己的
require("./message-alter.less");

// 引入公共js
let dom = require("../../assets/js/util.js");
const axios = require("../../assets/js/axios.js");

// 普通js
window.addEventListener("DOMContentLoaded", function () {
	// 页面跳转
	dom.turnToPage("mine", ".icon-left3");

	// 触发上传头像
	dom.$("#choose-img").addEventListener("click", function () {
		//同时触发文件选择框的点击
		dom.$("#imgFile").click();
	});

	// 选择头像并回填
	// 文件选择框的change事件
	dom.$("#imgFile").addEventListener("change", function () {
		/* this.files--上传文件的列表,files[0]--上传文件的对象*/

		// 获得上传的文件对象
		let file = this.files[0];

		// 创建一个FormData对象--以便存储
		let fd = new FormData();

		/*FormData 接口的append() 方法 会添加一个新值到 FormData 对象内的一个已存在的键中，如果键不存在则会添加该键,key，value(键值对)*/

		fd.append("file", file);

		axios.post("/api/shared/uploadPortrait", fd).then((res) => {
			console.log(res);
			if (res.data.errno === 0) {
				// 成功
				// URL回填，拼接
				dom.$("#head").src = axios.defaults.baseURL + res.data.data.imgurl;
				// 自定义属性值存储图片url
				dom.$("#head").dataset.value = res.data.data.imgurl;
			} else {
				// 失败提示
				alert("erro");
			}
		});
	});

	// 性别选择器
	dom.$("#gender").addEventListener("click", function () {
		weui.picker(
			[
				{ label: "male", value: 0 },
				{ label: "female", value: 1 },
				{ label: "secert", value: 2 },
			],
			{
				onConfirm: function (result) {
					dom.$("#gender").textContent = result[0].label;
					// 性别的value储存在自定义属性中，便于后续获取--类似于定义一个变量接值

					dom.$("#gender").dataset.value = result[0].value;
				},
				title: "please choose your sex",
			}
		);
	});
	// 生日时间选择器
	dom.$("#birthday").addEventListener("click", function () {
		console.log("1");
		// WebUI picker
		weui.datePicker({
			// 从1990到当前的年份
			start: 2000,
			end: new Date().getFullYear(),
			// 确认
			onConfirm: function (result) {
				// 拼接成xx-xx-xx
				let d = result.map((v) => v.value).join("-");
				dom.$("#birthday").textContent = d;
			},
			title: "choose your birthday",
		});
	});

	// 省份选择器--先省份后城市
	// 接省份id
	let provinceId = 0;
	dom.$("#province").addEventListener("click", async function () {
		// 发送请求获取省份数据
		let pro = await axios.get("api/shared/province");
		// 将获得数据变成weui支持的格式  label value
		let proArr = pro.data.data.map((v) => {
			return { label: v.name, value: v.id };
		});
		weui.picker(
			// 数据
			proArr,
			{
				onConfirm: function (result) {
					dom.$("#province").textContent = result[0].label;
					// 设置自定义属性值
					dom.$("#province").dataset.value = result[0].value;
					//将选择的省份ID赋值出来
					provinceId = result[0].value;
				},
				title: "please choose your Province",
			}
		);
	});
	// 城市选择器
	dom.$("#city").addEventListener("click", async function () {
		//判断有没有选择省份，如果没有提示
		if (provinceId === 0) {
			alert("请选择省份");
			return;
		}
		//发请求获取城市数据，通过选的的省份参数来获取数据
		let city = await axios.get("/api/shared/city?provinceId=" + provinceId);
		// 转化为weui支持的格式，遍历改键名
		let cityArr = city.data.data.map((v) => {
			return { label: v.name, value: v.id };
		});
		// 选择器
		weui.picker(
			// 城市数据
			cityArr,
			{
				onConfirm: function (result) {
					dom.$("#city").textContent = result[0].label;
					dom.$("#city").dataset.value = result[0].value;
				},
				title: "please choose your City",
			}
		);
	});
	// 个性签名--输入事件确定字数并渲染
	dom.$("#sign").addEventListener("input", function () {
		dom.$("#wordNum").textContent = this.value.length;
	});

	// 保存时获取各项数据，并上传，切记数据和接口参数要求的数据类型对应
	dom.$("#save").addEventListener("click", async function () {
		// 获取各项数据--最好与请求的名字一致

		// 用户名--输入框直接取值
		let nickName = dom.$("#nickName").value;

		// 性别-将暂存于自定义属性中的数字值拿出来--拿出的是string类型，转化为数字类型(接口参数要求为数字类型)
		let gender = Number(dom.$("#gender").dataset.value);

		// 省份
		let provinceId = Number(dom.$("#province").dataset.value);

		// 城市
		let cityId = Number(dom.$("#city").dataset.value);

		//birthday--接口参数为string，本身数据就是，无需其他
		let birthday = dom.$("#birthday").textContent;

		// 头像
		let imgUrl = dom.$("#head").dataset.value;

		// 个性签名--输入框直接取值
		let sign = dom.$("#sign").value;

		// 测试
		console.log(nickName, gender, provinceId, cityId, birthday, imgUrl, sign);

		// 发送请求，与参数名保持一致，所以可以简写（属性名与属性值一致时）
		axios
			.post("/api/user/changeInfo", {
				nickName,
				gender,
				provinceId,
				cityId,
				birthday,
				imgUrl,
				sign,
			})
			.then((res) => {
				if (res.data.errno === 0) {
					// 存储新的token
					localStorage.setItem("token", res.data.data.token);
					// 返回上一页
					history.back();
					//提示成功
					alert("Success!");
				} else {
					alert("Sorry , your message failed to be modified!");
				}
			});
	});

	// 信息获取并提交完毕存储后，回填数据

	axios.get("/api/user/info").then(async (res) => {
		console.log(res);
		let data = res.data.data;

		// 回填信息

		// 头像
		dom.$("#head").src = axios.defaults.baseURL + data.imgUrl;
		// 传到自定义属性中，便于保存数据，以便下次还在
		dom.$("#head").dataset.value = data.imgUrl;
		//昵称
		dom.$("#nickName").value = data.nickName;
		//性别--id对应数据，先获取数据，在通过id拿对应的数据
		let genderArr = ["male", "female", "secret"];
		// data.gender是数字，0,1,2对应各个值--下标对应值
		dom.$("#gender").textContent = genderArr[data.gender];
		// 空为0--male
		dom.$("#gender").dataset.value = data.gender || 0;
		//生日--字符串
		dom.$("#birthday").textContent = data.birthday;
		//省份--id对应数据，先获取数据，在通过id拿对应的数据
		// 获取数据
		let pro = await axios.get("api/shared/province");
		//pro.data.data
		//一一对应，对象里的 id 对应 name
		// 匹配，数组过滤--当获取数据中的id == 回填的id--返回满足条件的数组元素[{name:,id:}]
		let [province] = pro.data.data.filter((v) => v.id === data.provinceId);
		// 解构 province ={}
		dom.$("#province").textContent = province.name;
		dom.$("#province").dataset.value = data.provinceId;
		//城市，同上
		let city = await axios.get(
			"/api/shared/city?provinceId=" + data.provinceId
		);
		let [curCity] = city.data.data.filter((v) => v.id === data.cityId);
		dom.$("#city").textContent = curCity.name;
		dom.$("#city").dataset.value = data.cityId;
		//个性签名
		dom.$("#sign").value = data.sign;
		dom.$("#wordNum").textContent = data.sign.length;
	});
});
